<template>
  <FlexScroll ref="flexScroll" class="myProjectScroll" id="myProject" @scroll="nextPage" :distance="10">
    <div class="app-container">
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" class="clo200">
            <!-- <el-avatar class="member-avatar" shape="square" :size="160" :src="user.avatar" /> -->
            <Avatar :avatar="user.avatar" :icon-size="160" :class-name="'member-avatar'" />
          </el-col>
          <el-col :xs="24" :sm="12">
            <div class="member-info">
              <div class="dflex">
                <div class="member-name f20333">{{ user.nickname }}</div>
                <router-link :to="{ name: 'Log' }" style="line-height: 0">
                  <Avatar :avatar="icon_tick" :class-name="'member-edit'" :icon-size="30" />
                  <!-- <img class="member-edit " :src="icon_tick" alt="" srcset=""> -->
                </router-link>
              </div>
              <div class="dflex f14666 lh50">
                <img :src="member_1" alt="" srcset="" />
                <div class="member-name mr20">{{ user.identity || "暂无" }}</div>
                <img :src="member_2" alt="" srcset="" />
                <div class="member-name">{{ user.mobile?.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</div>
              </div>
              <el-row class="d-row">
                <el-col :span="4">
                  <div class="f18333 flexShrink_0 lh50">{{ user.member_count || 0 }}</div>
                  <div class="f14999 flexShrink_0">粉丝量</div>
                </el-col>
                <el-col :span="4">
                  <div class="f18333 flexShrink_0 lh50">￥{{ user.bill_sum || 0 }}</div>
                  <div class="f14999 flexShrink_0">收益</div>
                </el-col>
                <el-col :span="4">
                  <div class="f18333 flexShrink_0 lh50">{{ user.bill_count || 0 }}</div>
                  <div class="f14999 flexShrink_0">订单数</div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-tabs v-model="activeName" class="tabs" @tab-change="handleClick">
          <el-tab-pane label="会员功能" name="member" />
          <el-tab-pane label="小机器" name="machine" />
          <el-tab-pane label="Token记录" name="token" />
          <el-tab-pane label="我的项目" name="project" />
        </el-tabs>
      </el-card>

      <!-- tab内容 -->
      <div class="tab-content">
        <div v-show="!!tabKey[activeName].text" class="dflex justify-between">
          <div class="tab-head">
            <span class="f16333">{{ tabKey[activeName].text }}</span>
            <span class="f14999 pl15">{{ state[`${activeName}Count`] || tabKey[activeName].count }}</span>
          </div>
        </div>
        <!-- 小机器 -->
        <div class="card-mode" v-if="activeName === 'machine'">
          <CardModelFrom ref="cardModelRef" type="all" :height="'100%'" />
        </div>
        <!-- end -->
        <!-- 我的项目 -->
        <MyProject ref="myProjectRef" v-if="activeName === 'project'" />
        <!-- end -->
        <!-- token记录 -->
        <TokenList v-if="activeName === 'token'" />
        <!-- end -->
        <!-- 会员功能 -->
        <Membership v-if="activeName === 'member'" />
        <!-- end -->
      </div>
    </div>
  </FlexScroll>
</template>
<script lang="ts" setup>
import icon_tick from "@/assets/layouts/icon_tick.svg"
import member_1 from "@/assets/layouts/member_1.svg"
import member_2 from "@/assets/layouts/member_2.svg"
import Avatar from "@/components/Avatar/index.vue"
import FlexScroll from "@/components/FlexScroll/index.vue"
import { useUserStore } from "@/store/modules/user"
import CardModelFrom from "@/views/cloudModel/components/cardModel.vue"
import { storeToRefs } from "pinia"
import { reactive, ref } from "vue"
import Membership from "./components/membership.vue"
import MyProject from "./components/myProject.vue"
import TokenList from "./components/tokenList.vue"
import useMember from "./useMember"

const { state, getRobotListConut, myProjectNextPage } = useMember()
const userStore = useUserStore()
const { user } = storeToRefs(userStore)
console.log(user)

const cardModelRef = ref<any>(null)
const activeName = ref<string>("member")
const myProjectRef = ref<any>(null)

const nextPage = () => {
  switch (activeName.value) {
    case "project":
      myProjectNextPage()
      break
    case "machine":
      cardModelRef.value?.nextPage()
      break
    default:
      break
  }
}

const handleClick = (e: any) => {
  if (!state.machineCount && activeName.value === "machine") {
    getRobotListConut()
  }
}
//end

const tabKey: { [key: string]: any } = reactive({
  member: {
    text: "会员功能",
    count: 0
  },
  machine: {
    text: "我的小机器",
    count: 0
  },
  token: "",
  project: {
    // text: '我的项目',
    count: 0
  }
})
</script>

<style lang="scss" scoped>
::v-deep .card-mode .cardModel .scroll .content {
  height: 100% !important;
}

::v-deep .avatar_icon_img {
  .member-avatar {
    border-radius: 20px !important;
  }
}

.app-container {
  // height: calc(100vh - 60px);
  :deep(.el-tabs__item) {
    color: #999;
    font-weight: 400;
  }

  :deep(.el-tabs__item.is-active) {
    color: #c3181f;
  }

  .f16333 {
    font-weight: 500;
  }

  ::v-deep .avatar_icon_img {
    .member-edit {
      cursor: pointer;
      margin-left: 10px;
    }
  }

  .tab-head {
    margin: 30px 0;
  }

  .mr20 {
    margin-left: 5px;
  }

  .clo200 {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
  }

  .member-info {
    width: 100%;
    height: 160px;
    position: relative;

    .d-row {
      position: absolute;
      bottom: 0;

      .el-col {
        min-width: 110px;
      }
    }
  }

  :deep(.el-tabs__nav-wrap::after) {
    background: #fff;
  }

  :deep(.el-tabs__header) {
    margin: 40px 0 -20px;
  }
}
</style>
